<template>
  <div class="watch-video">
    <div class="header">
      <van-nav-bar title="猫眼电影" left-arrow @click-left="back">
      </van-nav-bar>
    </div>

    <div>
      <video :src="video" autoplay controls></video>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "WatchVideo",
  data(){
    return{
      video:null
    }
  },
  components: {
    Navi,
  },
  created(){
    this.$route.query.video;
    // 

    this.video = this.$route.query.video;
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.watch-video {
  margin-top: 46px;
  height: 620px;
  background-color: #f5f5f5;
}
.header {
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #dd403b;
  /deep/.van-nav-bar__content {
    // border: 1px solid red;
    background-color: #dd403b;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
}
video{
 width: 100%;
 height: 210px;
}
</style>